<template>
    <br>
    <input type="text" v-model="firstName">
    <br>
    <input type="text" v-model="endName">
    <br>
    <p1>{{ fullName }}</p1>
    <br>
    <p1>{{ fullName }}</p1>
    <button @click="changeName">修改名字</button>
</template>

<script lang="ts">
export default {
    name: 'Hello'
}
</script>

<!--setup语法糖-->
<script setup lang="ts">
import { ref, reactive,toRefs, toRef,computed } from 'vue'

let firstName = ref('张')
let endName = ref('三')

//此时定义的计算属性不能修改
let fullName = computed(() => {
    return firstName.value+endName.value+'~'
})

let allName = computed({
    get() { 
        return firstName.value+endName.value+'~'
    },
    set(val) { 
        endName.value = val
    }
})

function changeName() { 
    allName.value = 'li'
}


</script>